<!--

    Copyright © 2016-2023 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<mat-tab-group mat-stretch-tabs="false" class="tb-widget-config tb-absolute-fill" [(selectedIndex)]="selectedTab">
  <mat-tab label="{{ 'widget-config.data' | translate }}" *ngIf="widgetType !== widgetTypes.static">
    <div [formGroup]="dataSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px">
      <div *ngIf="displayTimewindowConfig()" fxFlex="100"
           fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxFlex.gt-xs>
          <mat-checkbox formControlName="useDashboardTimewindow">
            {{ 'widget-config.use-dashboard-timewindow' | translate }}
          </mat-checkbox>
          <mat-checkbox formControlName="displayTimewindow">
            {{ 'widget-config.display-timewindow' | translate }}
          </mat-checkbox>
        </div>
        <section fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="center start"
                 fxFlex.gt-xs>
          <span [ngClass]="{'tb-disabled-label': dataSettings.get('useDashboardTimewindow').value}" translate
                style="padding-right: 8px;">widget-config.timewindow</span>
          <tb-timewindow asButton="true"
                         isEdit="true"
                         alwaysDisplayTypePrefix
                         [historyOnly]="onlyHistoryTimewindow()"
                         quickIntervalOnly="{{ widgetType === widgetTypes.latest }}"
                         aggregation="{{ widgetType === widgetTypes.timeseries }}"
                         fxFlex formControlName="timewindow"></tb-timewindow>
        </section>
      </div>
      <div *ngIf="widgetType === widgetTypes.alarm" fxLayout="column" fxLayoutAlign="center">
        <tb-alarm-filter-config buttonMode="false" formControlName="alarmFilterConfig"></tb-alarm-filter-config>
      </div>
      <mat-accordion multi>
        <mat-expansion-panel (opened)="extensionPanelIsOpen(true)" (closed)="extensionPanelIsOpen(false)" class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&
                                    widgetType !== widgetTypes.alarm &&
                                    modelValue?.isDataEnabled" [expanded]="true">
          <mat-expansion-panel-header>
            <mat-panel-title fxLayout="row">
              <div fxLayout="column">
                <div class="tb-panel-title" translate>widget-config.datasources</div>
                <div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1"
                     class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div>
              </div>
              <mat-icon *ngIf = '(datasourceError.length > 0 || !datasourcesFormArray().valid) && !openExtensionPanel'
                        style = "color: red; font-size: 18px; margin-left: 5px;">
                report_gmailerrorred
              </mat-icon>
            </mat-panel-title>
            <mat-panel-description *ngIf = "timeseriesKeyError">
              <mat-error >{{ 'widget-config.timeseries-key-error' | translate }}</mat-error>
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate">
                <span translate fxLayoutAlign="center center"
                      class="tb-prompt">datasource.add-datasource-prompt</span>
          </div>
          <ng-template #datasourcesTemplate>
            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
              <span style="width: 68px;"></span>
              <div fxFlex fxLayout="row" fxLayoutAlign="start center"
                   style="padding: 0 0 0 10px; margin: 5px;">
                <span translate style="min-width: 160px;">widget-config.datasource-type</span>
                <span fxHide fxShow.gt-sm translate fxFlex
                      style="padding-left: 10px;">widget-config.datasource-parameters</span>
                <span style="min-width: 40px;"></span>
              </div>
            </div>
            <div style="overflow: auto; padding-bottom: 15px;">
              <mat-list class="tb-drop-list"
                        cdkDropList
                        cdkDropListOrientation="vertical"
                        (cdkDropListDropped)="onDatasourceDrop($event)"
                        [cdkDropListDisabled]="disabled"
                        formArrayName="datasources">
                <mat-list-item *ngFor="let datasourceControl of datasourcesFormArray().controls; let $index = index;"
                               class="tb-datasource-list-item tb-draggable" cdkDrag
                               [cdkDragDisabled]="disabled">
                  <div fxFlex fxLayout="row" fxLayoutAlign="start center">
                    <div fxLayout="row" fxLayoutAlign="start center" style="width: 68px;">
                      <button *ngIf="!disabled" mat-icon-button color="primary"
                              class="handle"
                              style="min-width: 40px; margin: 0"
                              cdkDragHandle
                              matTooltip="{{ 'action.drag' | translate }}"
                              matTooltipPosition="above">
                        <mat-icon>drag_handle</mat-icon>
                      </button>
                      <span>{{$index + 1}}.</span>
                    </div>
                    <div class="mat-elevation-z4 tb-datasource-params" fxFlex>
                      <div fxFlex
                           fxLayout="row"
                           fxLayoutAlign="start center">
                        <section class="tb-datasource-section">
                          <mat-form-field class="tb-datasource-type">
                            <mat-select [formControl]="datasourceControl.get('type')">
                              <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
                                {{ datasourceTypesTranslations.get(datasourceType) | translate }}
                              </mat-option>
                            </mat-select>
                          </mat-form-field>
                          <section fxLayout="column" class="tb-datasource" [ngSwitch]="datasourceControl.get('type').value">
                            <ng-template [ngSwitchCase]="datasourceType.function">
                              <mat-form-field fxFlex>
                                <mat-label translate>datasource.label</mat-label>
                                <input matInput
                                       [formControl]="datasourceControl.get('name')">
                              </mat-form-field>
                            </ng-template>
                            <ng-template [ngSwitchCase]="datasourceControl.get('type').value === datasourceType.entity ||
                                                   datasourceControl.get('type').value === datasourceType.entityCount ||
                                                   datasourceControl.get('type').value === datasourceType.alarmCount ? datasourceControl.get('type').value : ''">
                              <tb-alarm-filter-config *ngIf="datasourceControl.get('type').value === datasourceType.alarmCount"
                                                      propagatedFilter="false"
                                                      style="height: 56px; margin-bottom: 8px;"
                                                      [formControl]="datasourceControl.get('alarmFilterConfig')"></tb-alarm-filter-config>
                              <tb-entity-alias-select
                                *ngIf="datasourceControl.get('type').value !== datasourceType.alarmCount"
                                [showLabel]="true"
                                [tbRequired]="true"
                                [aliasController]="aliasController"
                                [formControl]="datasourceControl.get('entityAliasId')"
                                [callbacks]="widgetConfigCallbacks">
                              </tb-entity-alias-select>
                              <tb-filter-select
                                *ngIf="datasourceControl.get('type').value !== datasourceType.alarmCount"
                                [showLabel]="true"
                                [aliasController]="aliasController"
                                [formControl]="datasourceControl.get('filterId')"
                                [callbacks]="widgetConfigCallbacks">
                              </tb-filter-select>
                              <mat-form-field *ngIf="[datasourceType.entityCount, datasourceType.alarmCount].includes(datasourceControl.get('type').value)"
                                              fxFlex>
                                <input matInput
                                       placeholder="{{ 'datasource.label' | translate }}"
                                       [formControl]="datasourceControl.get('name')">
                              </mat-form-field>
                            </ng-template>
                          </section>
                          <section fxLayout="column" fxLayoutAlign="stretch" fxFlex>
                            <tb-data-keys class="tb-data-keys" fxFlex
                                          [widgetType]="widgetType"
                                          [datasourceType]="datasourceControl.get('type').value"
                                          [maxDataKeys]="modelValue?.typeParameters?.maxDataKeys"
                                          [optDataKeys]="dataKeysOptional(datasourceControl.get('type').value)"
                                          [aliasController]="aliasController"
                                          [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
                                          [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective"
                                          [dashboard]="dashboard"
                                          [widget]="widget"
                                          [callbacks]="widgetConfigCallbacks"
                                          [entityAliasId]="datasourceControl.get('entityAliasId').value"
                                          [formControl]="datasourceControl.get('dataKeys')">
                            </tb-data-keys>
                            <tb-data-keys *ngIf="widgetType === widgetTypes.timeseries &&
                                               modelValue?.typeParameters?.hasAdditionalLatestDataKeys" class="tb-data-keys" fxFlex
                                          [widgetType]="widgetTypes.latest"
                                          [datasourceType]="datasourceControl.get('type').value"
                                          [optDataKeys]="true"
                                          [aliasController]="aliasController"
                                          [datakeySettingsSchema]="modelValue?.latestDataKeySettingsSchema"
                                          [dataKeySettingsDirective]="modelValue?.latestDataKeySettingsDirective"
                                          [dashboard]="dashboard"
                                          [widget]="widget"
                                          [callbacks]="widgetConfigCallbacks"
                                          [entityAliasId]="datasourceControl.get('entityAliasId').value"
                                          [formControl]="datasourceControl.get('latestDataKeys')">
                            </tb-data-keys>
                          </section>
                        </section>
                        <button [disabled]="isLoading$ | async"
                                type="button"
                                mat-icon-button color="primary"
                                style="min-width: 40px;"
                                (click)="removeDatasource($index)"
                                matTooltip="{{ 'widget-config.remove-datasource' | translate }}"
                                matTooltipPosition="above">
                          <mat-icon>close</mat-icon>
                        </button>
                      </div>
                      <tb-error class="tb-datasource-error" [error]="datasourceError[$index] ? datasourceError[$index] : ''"></tb-error>
                    </div>
                  </div>
                </mat-list-item>
              </mat-list>

            </div>
          </ng-template>
          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
            <button [disabled]="isLoading$ | async"
                    type="button"
                    mat-raised-button color="primary"
                    [fxShow]="modelValue?.typeParameters &&
                              (modelValue?.typeParameters.maxDatasources === -1 || datasourcesFormArray().controls.length < modelValue?.typeParameters.maxDatasources)"
                    (click)="addDatasource()"
                    matTooltip="{{ 'widget-config.add-datasource' | translate }}"
                    matTooltipPosition="above">
              <mat-icon>add</mat-icon>
              <span translate>action.add</span>
            </button>
          </div>
        </mat-expansion-panel>
        <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.rpc &&
                                    modelValue?.isDataEnabled" [expanded]="true">
          <mat-expansion-panel-header>
            <mat-panel-title>
              {{ 'widget-config.target-device' | translate }}
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div [formGroup]="targetDeviceSettings" style="padding: 0 5px;">
            <tb-entity-alias-select fxFlex
              [tbRequired]="!widgetEditMode"
              [aliasController]="aliasController"
              [allowedEntityTypes]="[entityTypes.DEVICE]"
              [callbacks]="widgetConfigCallbacks"
              formControlName="targetDeviceAliasId">
            </tb-entity-alias-select>
          </div>
        </mat-expansion-panel>
        <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.alarm &&
                                    modelValue?.isDataEnabled" [expanded]="true">
          <mat-expansion-panel-header>
            <mat-panel-title>
              {{ 'widget-config.alarm-source' | translate }}
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div class="tb-datasource-params" [formGroup]="alarmSourceSettings">
            <section class="tb-datasource-section">
              <mat-form-field class="tb-datasource-type">
                <mat-select formControlName="type">
                  <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
                    {{ datasourceTypesTranslations.get(datasourceType) | translate }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <section class="tb-datasource" [ngSwitch]="alarmSourceSettings.get('type').value">
                <ng-template [ngSwitchCase]="datasourceType.entity">
                  <tb-entity-alias-select
                    [showLabel]="true"
                    [tbRequired]="alarmSourceSettings.get('type').value === datasourceType.entity"
                    [aliasController]="aliasController"
                    formControlName="entityAliasId"
                    [callbacks]="widgetConfigCallbacks">
                  </tb-entity-alias-select>
                  <tb-filter-select
                    [showLabel]="true"
                    [aliasController]="aliasController"
                    formControlName="filterId"
                    [callbacks]="widgetConfigCallbacks">
                  </tb-filter-select>
                </ng-template>
              </section>
              <tb-data-keys class="tb-data-keys" fxFlex
                            [widgetType]="widgetType"
                            [datasourceType]="alarmSourceSettings.get('type').value"
                            [aliasController]="aliasController"
                            [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
                            [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective"
                            [dashboard]="dashboard"
                            [widget]="widget"
                            [callbacks]="widgetConfigCallbacks"
                            [entityAliasId]="alarmSourceSettings.get('entityAliasId').value"
                            formControlName="dataKeys">
              </tb-data-keys>
            </section>
          </div>
        </mat-expansion-panel>
        <mat-expansion-panel [formGroup]="widgetSettings">
          <mat-expansion-panel-header>
            <mat-panel-title translate>widget-config.data-settings</mat-panel-title>
          </mat-expansion-panel-header>
          <ng-template matExpansionPanelContent>
            <div fxLayout="row" *ngIf="widgetType !== widgetTypes.rpc &&
                                    widgetType !== widgetTypes.alarm &&
                                    modelValue?.isDataEnabled && !modelValue?.typeParameters?.singleEntity">
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.data-page-size</mat-label>
                <input matInput formControlName="pageSize" type="number" min="1" step="1">
              </mat-form-field>
            </div>
            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap="8px">
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.units</mat-label>
                <input matInput formControlName="units">
              </mat-form-field>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.decimals</mat-label>
                <input matInput formControlName="decimals" type="number" min="0" max="15" step="1">
              </mat-form-field>
            </div>
            <div fxLayout="row">
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.no-data-display-message</mat-label>
                <input matInput formControlName="noDataDisplayMessage">
              </mat-form-field>
            </div>
          </ng-template>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </mat-tab>
  <mat-tab label="{{ 'widget-config.settings' | translate }}">
    <div class="mat-content mat-padding" fxLayout="column">
      <div [formGroup]="widgetSettings" fxLayout="column">
        <fieldset class="fields-group">
          <legend class="group-title" translate>widget-config.title</legend>
          <mat-slide-toggle class="mat-slide" formControlName="showTitle">
            {{ 'widget-config.display-title' | translate }}
          </mat-slide-toggle>
          <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px">
            <mat-form-field fxFlex>
              <mat-label translate>widget-config.title</mat-label>
              <input matInput formControlName="title">
            </mat-form-field>
            <mat-form-field fxFlex>
              <mat-label translate>widget-config.title-tooltip</mat-label>
              <input matInput formControlName="titleTooltip">
            </mat-form-field>
          </div>
          <fieldset class="fields-group" fxLayoutGap.gt-xs="8px" style="margin: 0">
            <legend class="group-title" translate>widget-config.title-icon</legend>
            <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
              {{ 'widget-config.display-icon' | translate }}
            </mat-slide-toggle>
            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px">
              <tb-material-icon-select fxFlex
                                       formControlName="titleIcon">
              </tb-material-icon-select>
              <tb-color-input fxFlex
                              label="{{'widget-config.icon-color' | translate}}"
                              icon="format_color_fill"
                              openOnInput
                              formControlName="iconColor">
              </tb-color-input>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.icon-size</mat-label>
                <input matInput formControlName="iconSize">
              </mat-form-field>
            </div>
          </fieldset>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header>
              <mat-panel-description fxLayoutAlign="end" translate>
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
              <ng-template matExpansionPanelContent>
                <tb-json-object-edit
                  [editorStyle]="{minHeight: '100px'}"
                  required
                  label="{{ 'widget-config.title-style' | translate }}"
                  formControlName="titleStyle"
                ></tb-json-object-edit>
              </ng-template>
          </mat-expansion-panel>
        </fieldset>
        <fieldset class="fields-group">
          <legend class="group-title" translate>widget-config.widget-style</legend>
          <div fxLayout="column" fxLayout.gt-md="row wrap" fxFlex fxLayoutGap.gt-xs="8px" class="tb-widget-style">
            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
              <tb-color-input fxFlex
                              label="{{'widget-config.background-color' | translate}}"
                              icon="format_color_fill"
                              openOnInput
                              formControlName="backgroundColor">
              </tb-color-input>
              <tb-color-input fxFlex
                              label="{{'widget-config.text-color' | translate}}"
                              icon="format_color_fill"
                              openOnInput
                              formControlName="color">
              </tb-color-input>
            </div>
            <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.padding</mat-label>
                <input matInput formControlName="padding">
              </mat-form-field>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.margin</mat-label>
                <input matInput formControlName="margin">
              </mat-form-field>
            </div>
          </div>
          <mat-slide-toggle class="slide-block" formControlName="dropShadow">
            {{ 'widget-config.drop-shadow' | translate }}
          </mat-slide-toggle>
          <mat-slide-toggle class="slide-block" formControlName="enableFullscreen">
            {{ 'widget-config.enable-fullscreen' | translate }}
          </mat-slide-toggle>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header>
              <mat-panel-description fxLayoutAlign="end" translate>
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
            <ng-template matExpansionPanelContent>
              <tb-json-object-edit
                [editorStyle]="{minHeight: '100px'}"
                required
                label="{{ 'widget-config.widget-style' | translate }}"
                formControlName="widgetStyle"
              ></tb-json-object-edit>
              <tb-css
                label="{{ 'widget-config.widget-css' | translate }}"
                formControlName="widgetCss"
              ></tb-css>
            </ng-template>
          </mat-expansion-panel>
        </fieldset>
        <fieldset class="fields-group fields-group-slider" *ngIf="showLegendFieldset">
          <legend class="group-title" translate>widget-config.legend</legend>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header fxLayout="row wrap">
              <mat-panel-title>
                <mat-slide-toggle formControlName="showLegend" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                  {{ 'widget-config.display-legend' | translate }}
                </mat-slide-toggle>
              </mat-panel-title>
              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
            <ng-template matExpansionPanelContent>
              <tb-legend-config formControlName="legendConfig"></tb-legend-config>
            </ng-template>
          </mat-expansion-panel>
        </fieldset>
        <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider">
          <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header style="height: fit-content;">
              <mat-panel-title fxLayout.xs="column" fxLayoutAlign.xs="center start" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex="70">
                <mat-slide-toggle formControlName="mobileHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                  {{ 'widget-config.mobile-hide' | translate }}
                </mat-slide-toggle>
                <mat-slide-toggle formControlName="desktopHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                  {{ 'widget-config.desktop-hide' | translate }}
                </mat-slide-toggle>
              </mat-panel-title>
              <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate fxFlex="30">
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
            <ng-template matExpansionPanelContent>
              <div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
                <mat-form-field fxFlex>
                  <mat-label translate>widget-config.order</mat-label>
                  <input matInput formControlName="mobileOrder" type="number" step="1">
                </mat-form-field>
                <mat-form-field fxFlex>
                  <mat-label translate>widget-config.height</mat-label>
                  <input matInput formControlName="mobileHeight" type="number" min="1" step="1">
                </mat-form-field>
              </div>
            </ng-template>
          </mat-expansion-panel>
        </fieldset>
      </div>
    </div>
  </mat-tab>
  <mat-tab *ngIf="displayAdvanced()" label="{{ 'widget-config.advanced' | translate }}">
    <div [formGroup]="advancedSettings" class="mat-content mat-padding tb-advanced-widget-config"
         fxLayout="column">
        <tb-widget-settings
          [aliasController]="aliasController"
          [dashboard]="dashboard"
          [widget]="widget"
          formControlName="settings">
        </tb-widget-settings>
    </div>
  </mat-tab>
  <mat-tab label="{{ 'widget-config.actions' | translate }}" [formGroup]="actionsSettings">
    <tb-manage-widget-actions
      [callbacks]="widgetConfigCallbacks"
      [widgetType] = "modelValue.widgetType"
      formControlName="actionsData">
    </tb-manage-widget-actions>
  </mat-tab>
</mat-tab-group>
